<template>
  <div id="SC">
    <el-card>
      <div slot="header">
        <div class="cardHeader">
          <div class="cardTitle">经典数据集Sc</div>
          <school-major-cascade-selector v-model="mid"></school-major-cascade-selector>
          <el-select style="width: 75px;margin:0 25px;"
                     placeholder="请选择颗粒度"
                     v-model="granularity">
            <el-option v-for="(item,index) in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-button type="primary"
                     :disabled="loading"
                     :icon="loading?'el-icon-loading':''"
                     @click="draw">获取经典数据集</el-button>
        </div>
      </div>
      <div>
        <div v-show="loading">
          <div class="promptDiv">
            <div class="layer"></div>
            <el-image style="z-index: 2;margin: 5px 0;width: 200px":src="loadingSrc" fit="contain"></el-image>
          </div>
        </div>
        <div v-show="calssicBooksData==null && loading==false"
             class="promptDiv">
          <el-image class="emptyImage" :src="imgSrc" fit="contain"></el-image>
        </div>
        <div v-show="calssicBooksData!=null && loading==false" id="chartSC" style="width: 80vw; height: 100vh" ref="chartSC"></div>
      </div>
    </el-card>
    <el-dialog title="经典数据集详情" :visible.sync="dialogVisible">
      <el-tree ref="tree"
               :data="bookDeatil" :props="defaultProps"
               node-key="code">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
              </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { TooltipComponent } from 'echarts/components'
import { TreeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { generateSc, generateSM } from '@/api/curriculumSystemManagement/home'
import schoolMajorCascadeSelector from '@/components/schoolMajorCascadeSelector'
import { granularityOptions } from '@/utils/dictionary'
import { bookDetail } from '@/api/curriculumSystemManagement/book'

echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
export default {
  name: 'SC',
  data() {
    return {
      imgSrc: require('@/assets/images/R-C.jpg'),
      loadingSrc: require('@/assets/images/loading.gif'),
      loading:false,
      //详情弹窗
      dialogVisible:false,
      chartSC: null,
      //选择的专业
      mid:[],
      //颗粒度
      granularity: 3,
      options: granularityOptions,
      //原始的数据
      originalCalssicBooksData:null,
      calssicBooksData: null,
      //教材详情
      bookDeatil:null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  components:{
    schoolMajorCascadeSelector
  },
  methods: {
    //绘制SC树形表
    async draw() {
      const self = this
      if(self.mid.length<2){
        self.$message({
          type:'warning',
          message:'请选择两个以上专业进行运算'
        })
        return
      }
      let postData = {
        sid: [],
        mid: self.mid,
        granularity: self.granularity
      }
      self.loading = true
      try {
        await self.getList(postData)
        this.loading = false
      }catch{
        this.loading = false
      }

      if(this.chartSC == null) {
        this.chartSC = echarts.init(self.$refs.chartSC)
      }
      let option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [self.calssicBooksData],
            initialTreeDepth: 1,
            top: '1%',
            left: '14%',
            bottom: '1%',
            right: '30%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 16
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      self.chartSC.clear()
      self.chartSC.setOption(option)
      self.chartSC.on("click", self.treeClick);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        self.chartSC.resize();
      })
    },
    // 树节点的带点击事件
    async treeClick(params){
      const self = this
      if(params.dataIndex>1){
        let List
        for(let i in self.originalCalssicBooksData){
          if(self.originalCalssicBooksData[i].code == params.value){
            List = self.originalCalssicBooksData[i]
            break;
          }
        }
        // const response = await bookDetail(params.data.isbn)
        // let List = self.handleTree(response.data, 'code', 'parent')
        self.bookDeatil = [List]
        console.log('self.bookDeatil',self.bookDeatil)
        self.dialogVisible = true
      }
    },
    //获取数据集数据
    async getList(postData) {
      const self = this
      let response
      try{
        response = await generateSc(postData)
      }catch{
        self.calssicBooksData = {
          name: '经典数据集',
          children: []
        }
      }

      if(response.data == undefined){
        self.calssicBooksData = {
          name: '经典数据集',
          children: []
        }
      }
      self.$message({
        type: 'success',
        message: response.msg
      })
      self.originalCalssicBooksData = self.handleTree(response.data, 'code', 'parent')
      let tempCalssicBooksData = []
      for(let i in self.originalCalssicBooksData){
        tempCalssicBooksData.push({
          code:self.originalCalssicBooksData[i].code,
          value:self.originalCalssicBooksData[i].code,
          name:self.originalCalssicBooksData[i].name
        })
      }
      let temp = {
        name: '经典数据集',
        children: tempCalssicBooksData
      }
      this.calssicBooksData = JSON.parse(JSON.stringify(temp))
    }
  }
}
</script>

<style scoped lang="scss">
#SC {
  .cardHeader{
    display: flex;
    flex-direction: row;
    align-items: center;
    .cardTitle {
      font-size: 24px;
      font-weight: bold;
      margin-right: 25px;
    }
  }
  .promptDiv{
    width: 100%;
    height: 270px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    .emptyImage{
      position: relative;
      left: -40px;
    }
    .layer {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
    }
  }
}
</style>
